<template>
	<view class="xq-yue">
		<!-- 导航栏 -->
		<view class="nav">
			<image src="/static/detail/800.png" mode="" @click="toBack"></image>
			<image src="/static/detail/shoucang.png" mode="" @click="toBookShelf"></image>
		</view>
		<view class="fengge"></view>
		<!-- 卡片 -->
		<view class="card">
			<view class="card-left">
				<image :src="bookdetail.imgSrc" mode=""></image>
			</view>
			<view class="card-center">
				<view class="card-title">{{bookdetail.title}}</view>
				<view class="card-author item">{{bookdetail.author}}</view>
				<view class="card-gen item">{{bookdetail.geng}}</view>
				<view class="card-end item">{{bookdetail.ziShu}}</view>
			</view>
			<view class="card-right" >
				<button  size="mini">+书架</button>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<up-read-more :toggle="true" show-height="200" color="#E60606" :shadow-style="{backgroundImage:'none'}" closeText="展开全部">
				<rich-text :nodes="bookdetail.desc" class="con-tent"></rich-text>
			</up-read-more>
		</view>
		<!-- 目录 -->
		<view class=" catalog">
			<!-- 目录 -->
			<up-sticky offset-top="10" :enable="enable" z-index="999">
				<view class="cat-nav">
					<view class="cat-left">
						<text class="cat-title">目录</text>
						<text class="left">连载中</text>
					</view>
					<view class="cat-right" >
							<view v-show="show">
								<image src="/static/detail/dao.png" mode=""></image>
								<text>倒序</text>
							</view>
							<view v-show="!show">
								<image src="/static/detail/zeng.png" mode=""></image>
								<text>正序</text>
							</view>
					</view>
				</view>
			</up-sticky>
			<view class="cat-zx">
				<!-- 最新章节 -->
				<view class="zuixin">
					<view class="zuixin-flex bgc">
						<view class="z-tit">{{'这里蛋妖气'}}</view>
						<view class="gary">免费</view>
					</view>
				</view>
				<!-- 章节目录 -->
				<view class="zuixin" v-for="(item,index) in list" :key="index" >
					<view class="zuixin-flex">
						<view class="x-tit">{{item.title}}</view>
						<view class="gary">{{item.free}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xq-btn">
			<view class="btn" @click="toRead" >
				立即阅读
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const show = ref<boolean>(false)
const enable = ref<boolean>(false)

const lis01 = ref([
{title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费"},
					{title:"第2章 以退为进",free:"免费"},
					{title:"第3章 这里蛋妖气",free:"免费"},
					{title:"第4章 等等，你到底是谁？",free:"免费"},
					{title:"第5章 周明府是何来头",free:"免费"},
					{title:"第6章 咦，这人看着眼熟",free:"免费"},
					{title:"第7章 生活不止眼前的苟且",free:"免费"}
])

const list = ref([
                    {title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费"},
					{title:"第2章 以退为进",free:"免费"},
					{title:"第3章 这里蛋妖气",free:"免费"},
					{title:"第4章 等等，你到底是谁？",free:"免费"},
					{title:"第5章 周明府是何来头",free:"免费"},
					{title:"第6章 咦，这人看着眼熟",free:"免费"},
					{title:"第7章 生活不止眼前的苟且",free:"免费"},
					{title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费"},
					{title:"第2章 以退为进",free:"免费"},
					{title:"第3章 这里蛋妖气",free:"免费"},
					{title:"第4章 等等，你到底是谁？",free:"免费"},
					{title:"第5章 周明府是何来头",free:"免费"},
					{title:"第6章 咦，这人看着眼熟",free:"免费"},
					{title:"第7章 生活不止眼前的苟且",free:"免费"}
])

const bookdetail = ref(
    {
						imgSrc:'/static/sift/item1.png',
						title:'陋室铭',
						geng:"更新至1288章",
						author:"刘禹锡 著",
						ziShu:"字数：128.90万字",
						show:false,
						desc:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？”
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？”
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`
				}
)

const toBack = () =>{
	uni.navigateBack({
		delta: 1
	})
}

const toBookShelf = () =>{

}

const toRead = () =>{
	uni.navigateTo({url : '/pages/readPage/index'})
}
</script>

<style scoped lang="scss">
.xq-yue{
	.fengge{
		height: 148rpx;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		padding: 50rpx 40rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 99;
		height: 0.625rem;
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}
	.card{
		display: flex;
		height: 280rpx;
		// background-color: #4CD964;
		border-bottom: 36rpx solid #F6F6F6;
		.card-left{
			margin-left: 36rpx;
			image{
				width: 134rpx;
				height: 180rpx;
				opacity: 0.75;
			}
		}
		.card-center{
			margin-left: 27rpx;
			width: 40%;
			.card-title{
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #000000;
				line-height: 50rpx;
			}
			.item{
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #A7A7A7;
				line-height: 50rpx;
			}
		}
		.card-right{
			margin-left: 30rpx;
			button{
				width: 156rpx;
				height: 58rpx;
				background: #E60606;
				color: #fff;
				margin-top: 150rpx;
			}
		}
	}
	.content{
		padding: 37rpx;
		border-bottom: 36rpx solid #F6F6F6;
		.con-tent{
			width: 678rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #939393;
			line-height: 50rpx;
			// overflow: hidden;
		}
		// .con-btn{
		// 	font-size: 24rpx;
		// 	font-family: Microsoft YaHei;
		// 	font-weight: 400;
		// 	color: #E60606;
		// 	line-height: 50rpx;
		// 	text-align: center;
		// 	margin-top: 20rpx;
		// }
	}
	.catalog{
		.cat-nav{
			padding: 20rpx 0 26rpx 34rpx;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			height: 88rpx;
			.cat-left{
				text{
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #BFBFBF;
					line-height: 50rpx;
				}
				.cat-title{
					font-size: 36rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #272727;
					line-height: 50rpx;
				}
				.left{
					margin-left: 19rpx;
				}
			}
			.cat-right{
				margin-right: 34rpx;
				text{
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #BFBFBF;
					line-height: 50rpx;
				}
				image{
					width: 28rpx;
					height: 24rpx;
					// margin-top: 20rpx;
				}
			}
		}
		.cat-zx{
			// padding: 0;
			// margin: 0;
			padding-bottom: 130rpx;
			// height: 88rpx;
			.zuixin{
				line-height: 80rpx;
				view{
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}
				.zuixin-flex{
					display: flex;
					justify-content: space-between;
					padding: 0 34rpx;
					box-sizing: border-box;
					.gary{
						color: #BFBFBF;
					}
				}
				.bgc{
					background: #F6F6F6;
				}
				.z-tit{
					font-size: 24rpx;
					color: #E60606;
				}
				.x-tit{
					font-size: 24rpx;
				}
			}
			
		}
		
	}
	.xq-btn{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		.btn{
			width: 750rpx;
			height: 128rpx;
			background: #E60606;
			color: #fff;
			font-size: 42rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 120rpx;
			border: none;
			text-align: center;
		}
	}
}
</style>
